import React, { useState } from "react";
import './TodoHeader.css';
import store from '../../../redux/store';
import { asyncAddTodo } from "../../../redux/reducers/todoReducer";
import Swal from "sweetalert2";

export default function TodoHeader() {
  let [v, setV] = useState('');
  //声明 keyup 的事件回调
  let keyup = async (e) => {
    //判断是否按下了回车键
    if(e.code === 'Enter'){
      //清空 input 框中的内容
      setV('');
      //发送请求 增加任务的状态
      //dispatch 函数的返回值就是异步 action 回调函数的返回值
      await store.dispatch(asyncAddTodo(v));
      //成功的提醒
      Swal.fire({
        title: "添加成功",
        icon: "success",
      });
    }
  }
  return (
    <div className="todo-header">
      <input type="text" onKeyUp={keyup} onChange={(e) => {setV(e.target.value)}} value={v} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  );
}
